<template>
	<view>
		<view class="smart-page-head">
		</view>
		<view class="">
			<video src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4" class="checkbox"
				style="width: 100%;height: 400rpx;"></video>
		</view>
		<view class="spsy">
		</view>
		<view class="sp">
			<view class="b">
				大自然的魅力
			</view>
			<view class="z">
				<view class="z-z">
					1.0万次播放
				</view>
				<view class="z-l">
					<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
				</view>3
			</view>
			<view class="z">
				<view class="">
					<image src="../../../static/000.png" style="width: 80rpx ;height: 80rpx;" mode=""></image>
				</view>
				<view class="z-h">
					<view class="">
						好吃的好玩的
					</view>
					<view class="z-z">
						12-12
					</view>
				</view>
				<view class="reg-right">
					+关注
				</view>
			</view>
		</view>
		<view class="item">
			<view class="">
				为你推荐
			</view>
			<view class="e-item">
				<view class="e">
					<image src="../../../static/000.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
				<view class="">
					<view class="e-right">
						大兴安岭出现超大型野兽，体重一吨比轿车还大，......
					</view>
					<view class="z">
						<view class="z-z1">
							动物大观察
						</view>
						<view class="z-z2">
							5.3万次播放
						</view>
					</view>
				</view>
			</view>
			<view class="e-item">
				<view class="e">
					<image src="../../../static/000.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
				<view class="">
					<view class="e-right">
						大兴安岭出现超大型野兽，体重一吨比轿车还大，......
					</view>
					<view class="z">
						<view class="z-z1">
							动物大观察
						</view>
						<view class="z-z2">
							5.3万次播放
						</view>
					</view>
				</view>
			</view>
			<view class="e-item">
				<view class="e">
					<image src="../../../static/000.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
				<view class="">
					<view class="e-right">
						大兴安岭出现超大型野兽，体重一吨比轿车还大，......
					</view>
					<view class="z">
						<view class="z-z1">
							动物大观察
						</view>
						<view class="z-z2">
							5.3万次播放
						</view>
					</view>
				</view>
			</view>
			<view class="e-item">
				<view class="e">
					<image src="../../../static/000.png" style="width: 200rpx;height: 200rpx;" mode=""></image>
				</view>
				<view class="">
					<view class="e-right">
						大兴安岭出现超大型野兽，体重一吨比轿车还大，......
					</view>
					<view class="z">
						<view class="z-z1">
							动物大观察
						</view>
						<view class="z-z2">
							5.3万次播放
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="color: #c5c5c5;margin-bottom: 30rpx;margin-left: 20rpx;">
			热门评论
		</view>
		<view class="pl">
			<view class="">
				<image src="../../../static/000.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
			</view>
			<view class="lp">
				<view class="pll">
					<view class="">
						<view class="zt1">
							网友872503
						</view>
						<view class="sj">
							<view class="sjs">
								2小时前
							</view>
							<view class="sjs">
								广西贵港市
							</view>
						</view>
					</view>
					<view class="pl">
						<view class="plll">
							7
						</view>
						<view class="plll">
							<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
						</view>
						<view class="plll">
							<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
						</view>
					</view>
				</view>
				<view class="pll">
					微笑生活，勇敢面对
				</view>
			</view>
		</view>
		<view class="pl">
			<view class="">
				<image src="../../../static/000.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
			</view>
			<view class="lp">
				<view class="pll">
					<view class="">
						<view class="zt1">
							网友872503
						</view>
						<view class="sj">
							<view class="sjs">
								2小时前
							</view>
							<view class="sjs">
								广西贵港市
							</view>
						</view>
					</view>
					<view class="pl">
						<view class="plll">
							7
						</view>
						<view class="plll">
							<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
						</view>
						<view class="plll">
							<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
						</view>
					</view>
				</view>
				<view class="pll">
					微笑生活，勇敢面对
				</view>
			</view>
		</view>
		<view class="pl">
			<view class="">
				<image src="../../../static/000.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
			</view>
			<view class="lp">
				<view class="pll">
					<view class="">
						<view class="zt1">
							网友872503
						</view>
						<view class="sj">
							<view class="sjs">
								2小时前
							</view>
							<view class="sjs">
								广西贵港市
							</view>
						</view>
					</view>
					<view class="pl">
						<view class="plll">
							7
						</view>
						<view class="plll">
							<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
						</view>
						<view class="plll">
							<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
						</view>
					</view>
				</view>
				<view class="pll">
					微笑生活，勇敢面对
				</view>
			</view>
		</view>
		<view class="pl">
			<view class="">
				<image src="../../../static/000.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
			</view>
			<view class="lp">
				<view class="pll">
					<view class="">
						<view class="zt1">
							网友872503
						</view>
						<view class="sj">
							<view class="sjs">
								2小时前
							</view>
							<view class="sjs">
								广西贵港市
							</view>
						</view>
					</view>
					<view class="pl">
						<view class="plll">
							7
						</view>
						<view class="plll">
							<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
						</view>
						<view class="plll">
							<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
						</view>
					</view>
				</view>
				<view class="pll">
					微笑生活，勇敢面对
				</view>
			</view>
		</view>
		<view class="xhx">

		</view>
		<view class="zj">
			已加载全部
		</view>
		<view class="xhxx">

		</view>
		<view class="zdb">
			<view class="">
				<image src="../../../static/000.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
			<view class="left">
				<input type="text" style="width: 220rpx;margin-right: 20rpx;font-size: 25rpx;" placeholder="有何观点"
					class="search_input">
			</view>
			<view class="jl">
				<image src="../../../static/000.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
			</view>
			<view class="jl">
				<image src="../../../static/000.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
			<view class="jl">
				<image src="../../../static/000.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.item {
		margin: 20rpx 20rpx 20rpx 20rpx;
	}
	.z-l{
		position: absolute;
		right: 7%;
	}

	.spsy {
		width: 100%;
		height: 40rpx;
	}

	.checkbox-item {
		position: fixed;
		top: 85rpx;
		z-index: 1;
	}

	.sp {
		margin: 20rpx;
		border-bottom: 1rpx solid #99bcac;
	}

	.b {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		font-size: 45rpx;
	}

	.reg-right {
		background-color:   #2b88d8;
		height: 50rpx;
		border-radius: 50rpx;
		color: #ffffff;
		width: 140rpx;
		text-align: center;
	}

	.c {
		display: flex;
		flex-direction: row;
	}

	.d {
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #d0d0d0;
	}

	.z {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.z-h {
		margin-right: 210rpx;
	}

	.z-z1 {
		font-size: 30rpx;
		color: #c8c7cc;
		margin: 20rpx;
	}

	.z-z2 {
		font-size: 30rpx;
		color: #c8c7cc;
		margin: 20rpx;
	}

	.z-z {
		font-size: 30rpx;
		color: #c8c7cc;
	}

	.e-item {
		display: flex;
		flex-direction: row;
	}

	.e-right {
		margin: 20rpx;
		margin-top: 40rpx;
	}

	.e {
		margin-top: 30rpx;
	}

	.pl {
		display: flex;
		flex-direction: ;
		margin-right: -280rpx;
		margin-bottom: 40rpx;
	}

	.lp {
		margin-left: -30rpx;
	}

	.pll {
		display: flex;
		flex-direction: ;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		margin-left: 60rpx;
	}

	.plll {
		margin-right: 50rpx;
	}

	.xhx {
		border-bottom: 1rpx solid #c0c0c0;
		margin: 0rpx 20rpx 20rpx 100rpx;
	}

	.xhxx {
		border-bottom: 1rpx solid #d5d5d5;
		margin: 0rpx 20rpx 20rpx 10rpx;
		margin-bottom: 40rpx;
	}

	.jz {
		color: #c0c0c0;
		margin-left: 120rpx;
		margin-bottom: 80rpx;
	}

	.zdb {
		display: flex;
		flex-direction: row;
		background-color: #ffffff;
		width: 100%;
		height: 60rpx;
		position: fixed;
		bottom: 0;
	}

	.left {
		height: 10rpx;
		margin-left: 20rpx;
	}

	.search_input {
		background-color: #f8f8f8;
		border-radius: 40rpx;
		padding: 5rpx 30rpx 6rpx 30rpx;
		margin-right: 1rpx;
	}

	.jl {
		margin-left: 80rpx;
	}

	.zt1 {
		display: flex;
		flex-direction: row;
	}

	.zdb {
		display: flex;
		flex-direction: row;
	}

	.left {
		height: 10rpx;
		margin-left: 20rpx;
	}

	.search_input {
		background-color: #f8f8f8;
		border-radius: 40rpx;
		padding: 5rpx 30rpx 6rpx 30rpx;
		margin-right: 1rpx;
	}

	.jl {
		margin-left: 90rpx;
	}
</style>
